<template>
	<view>
		<view class="sh-userinfo-box">
			<view class="head-wrap" >
		<!-- 		<view slot="right" class="u-flex u-row-center u-col-center u-m-r-20" v-if="false" @tap="goStore">
					<button class="u-reset-button merchant-btn">切换商家版</button>
				</view> -->
				<view class="user-head u-flex u-row-between" style="padding-top:150rpx;">
					<view class="u-flex">
						<!-- 个人信息 -->
						<view class="info-box">
							<view class="u-flex">
							<!-- 	<u-upload
								 v-show="false"
								@on-uploaded="uploadSuccess($event)"
								:action="`${$API_URL}api/common/file/upload`" width="60" height="60"  maxCount="1"></u-upload> -->
								<view class="head-img-wrap"  @tap="$Router.push('/pages/user/info')">
							     	<image class="head-img"  :src="userInfo.avatar || $IMG_URL + '/imgs/avar.png'" mode="aspectFill"></image>
								</view>
								<view class="uni-flex uni-row" @click="toLogin">
									<text class="user-name u-ellipsis-1" style="text-align: center;">{{ userInfo.mobile || '请登录' }}</text>
									<view class="text user-level" style="-webkit-flex: 1;flex: 1;">{{userInfo.memberRank? onlevel(userInfo.memberRank.id):'普通会员'}}</view>
								</view>
							</view>
						</view>
					</view>
				<view  >
					 
					<view class=""  @tap="onSign">
					 	<image  :src=" $IMG_URL + '/imgs/sign.png'" ></image>
					</view>
				</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 自定义之个人信息
	 * @property {Object} detail - 个人信息
	 */
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import wechat from '@/ljshop/wechat/wechat';
	import Auth from '@/ljshop/permission/index.js';

	export default {
		components: {},
		computed: {
		 
		},
		data() {
			return {
				 placeholderStyle: 'color:#c4c4c4;	width: 108rpx;height: 108rpx;border-radius: 50%;background: #ccc;margin-right: 25rpx;overflow: hidden;',
				userInfo:{},
				avatar:'',
				loginType:"univerify",
				showModal: false,
				platform: this.$platform.get(), //当前平台。
				isFixed: false,
				navBackground: {
					background: 'none'
				}
			};
		},
		mounted() {
			
			this.init();
		},
		onLoad(){
			
		
			this.init();
		},
		onShow(){
		
			this.init();
			
		},
		props: {
			detail: {},
			scrollTop: {
				type: Number,
				default: 0
			},
			
		},
		watch: {
			scrollTop(val) {
				let backgroundText = this.detail.image ? `url(${this.detail.image})` : this.detail.color;
				this.isFixed = val > 50 ? true : false;
				this.navBackground.background = val > 50 ? backgroundText : 'none';
			}
		},
		computed: {
		 
		},
		methods: {
		 	...mapActions(['getUserInfo']),
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			},
			onlevel(id){
				//console.info(JSON.stringify(this.userInfo))
				
				if(id==1){
					return "钻石会员"
				}
				if(id==2){
					return "铂金会员"
				}
				
				if(id==3){
					return "黄金会员"
				}
				
				if(id==4){
					return "普通会员"
				}
				return "普通会员"
				
				
				
			},
			// 上传图片成功-单图
			uploadSuccess(e) {

				//console.info(JSON.stringify(e))
				 
			},
			init(){
					let that = this;
						that.$http('user.apiinfo', {
							UId: uni.getStorageSync("UId")
						}).then(res => {
								this.isRefresh = false;
								this.userInfo = res.data.HzMember
						});

			},
			async onChooseImg() {
				let authState = 0;
				authState += await new Auth('writePhotosAlbum').check();
				if (authState < 1) return;
				authState += await new Auth('camera').check();
				if (authState < 2) return;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						
						this.avatar = res.tempFilePaths[0];
					}
				});
				// const uploadImageRes = await this.uploadImage(chooseImageRes[0]);
				// this.userData.avatar = uploadImageRes.fullurl;
				// this.userData.fileUrl = uploadImageRes.url;
				// this.editInfoDisabled = this.userData.avatar == this.userInfo.avatar;
			},
			async chooseImage(count = 1) {
				
			},
			// 图片处理-上传图片
			async uploadImage(url) {
				const that = this;
				return new Promise((resolve, reject) => {
					that.$u.toast('上传中...');
					uni.uploadFile({
						url: that.$API_URL + 'api/common/file/upload',
						file: url,
						success: res => {
							//console.info(res)
							//console.info(url)
							that.$u.toast('上传成功');
							
						},
						complete: e => {
							uni.hideLoading();
						}
					});
				}).catch(e => {
					console.log(e);
				});
			},
			// 点击分享
			onShare() {
				this.$emit('onShare');
			},
			onSign() {
				this.jump('/pages/activity/sign/index');
			},
			// 同步用户信息
		
			// goStore() {
			// 	if (this.userOtherData.store_id) {
			// 		uni.setStorageSync('storeId', this.userOtherData.store_id);
			// 		this.jump('/pages/app/merchant/index', {
			// 			storeId: this.userOtherData.store_id
			// 		});
			// 	} else {
			// 		if (uni.getStorageSync('storeId')) {
			// 			this.jump('/pages/app/merchant/index');
			// 		} else {
			// 			this.jump('/pages/app/merchant/list');
			// 		}
			// 	}
			// 	//  #ifdef MP-WEIXIN
			// 	this.$store.commit('subscribeMessage', 'store');
			// 	//  #endif
			// },
			// // 绑定手机号
			// bindMobile() {
			// 	this.showAuthModal('bindMobile');
			// },
			toLogin() {
			 
				if(uni.getStorageSync('UId')){
			  		return 
			 	}
					uni.navigateTo({
						url: "/subunimodules/uni-id-pages/pages/login/login-withoutpwd?type=" + this.loginType
					})	
			},
			 
		}
	};
</script>

<style lang="scss">
	// 更新信息
	.modal-box {
		width: 600rpx;

		.btn-hover {
			background-color: rgb(230, 230, 230);
		}

		.modal-head {
			padding-top: 48rpx;
			font-weight: 500;
			text-align: center;
			color: $u-main-color;
		}

		.modal-content {
			padding: 48rpx;
			font-size: 30rpx;
			text-align: center;
			color: $u-content-color;
		}

		.modal-bottom {
			.modal-btn {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				box-sizing: border-box;
				cursor: pointer;
				text-align: center;
				border-radius: 4rpx;
			}

			.cancel-btn {
				color: #666666;
			}

			.save-btn {
				color: #e9b461;
			}
		}
	}

	.sh-userinfo-box {
		position: relative;
		height: calc(var(--status-bar-height) + 300rpx);

		.head-wrap {
			width: 100%;
			height: 140%;
			background: url("@/static/images/back.png") no-repeat center / 100% 100%;

			.merchant-btn {
				width: 178rpx;
				height: 64rpx;
				line-height: 64rpx;
				background: #ffffff;
				border-radius: 32rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #a8700d;
			}
		}

		.user-head {
			width: 100%;
			padding-top: 30rpx;

			.info-box {
				padding-left: 30rpx;

				.head-img-wrap {
					position: relative;

					.refresh-btn {
						position: absolute;
						padding: 0;
						background: none;
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background: #c9912c;
						top: -10rpx;
						right: 10rpx;
					}
				}

				.head-img {
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
					background: #ccc;
					margin-right: 25rpx;
					overflow: hidden;
				}

				.user-name {
					font-size: 28rpx;
					font-weight: 500;
					color: #fff;
					line-height: 30rpx;
					width: 240rpx;
					text-align: center;
				}
				.user-level {
					font-size: 30rpx;
					font-weight: 500;
					color: #fda22a;
					line-height: 30rpx;
					padding:10rpx;
					width: 180rpx;
					text-align: center;
					margin-top: 15rpx;
					background-color: #fff;
					border-radius: 15rpx;
					border: #fff 1rpx solid;
				}
			}

			.tag-box {
				background: rgba(0, 0, 0, 0.2);
				border-radius: 22rpx;
				margin-left: 10rpx;

				.tag-img {
					width: 40rpx;
					height: 40rpx;
					display: inline-block;
					border-radius: 50%;
				}

				.tag-title {
					font-size: 20rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					line-height: 40rpx;
					padding: 0 10rpx;
				}
			}

			.code-btn {
				padding: 30rpx;

				.icon-qrcode {
					font-size: 50rpx;
					color: #fff;
				}
			}
		}

		.wallet {
			font-size: 20rpx;
			padding-left: 140rpx;

			.money {
				margin-right: 40rpx;
			}
		}
	}

	// 绑定微信公众号
	.notice-box {
		width: 750rpx;
		height: 70rpx;
		background: rgba(253, 239, 216, 1);
		padding: 0 35rpx;

		.notice-detail {
			font-size: 24rpx;

			font-weight: 400;
			color: rgba(204, 149, 59, 1);
		}

		.bindPhone {
			width: 135rpx;
			line-height: 52rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			border-radius: 26rpx;
			padding: 0;
			font-size: 26rpx;

			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
	}
	
	.sign {
	 
		padding: 0;
		background: none;
		width: 60rpx;
		height: 60rpx;
 
		top: -10rpx;
		right: 10rpx;
	}
	.sh-wallet-box {
		background: #fff;
		height: 180rpx;
	 
		position: relative;
		background: url("@/static/images/backorder.png") no-repeat center / 100% 100%;
		width: 700rpx;
		margin-left: 25rpx;
		border-radius: 25rpx;
		z-index: 10;
		.wallet-left {
			flex: 4;
		}
		.wallet-right {
			position: relative;
			.cut-off--line {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: (750rpx/5) - 15rpx;
				width: 30rpx;
				height: 136rpx;
			}
		}
		.wallet-item {
			flex: 1;
			.wallet-img {
				width: 46rpx;
				height: 46rpx;
			}
			.wallet-item__detail {
				font-size: 28rpx;
				width: 180rpx;
				text-align: center;
				font-weight: 500;
				color: rgba(168, 112, 13, 1);
			}
			.wallet-item__title {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				margin-top: 20rpx;
			}
			.item-balance::after {
				content: '元';
				font-size: 16rpx;
				margin-left: 4rpx;
			}
			.item-score::after {
				content: '个';
				font-size: 14rpx;
				margin-left: 4rpx;
			}
			.item-coupon::after {
				content: '张';
				font-size: 16rpx;
				margin-left: 4rpx;
			}
		}
	}
</style>
